<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            width: 370px;
            height: 120px;
            background-color: #f99;
            border: 20px solid #000;
        }

        /*border-image  边框图片*/
        
        li:nth-child(1){
            /*边框图片地址*/
            border-image-source: url(images/border.jpg);
            /*切分图片: 上 右 下 左， 自带单位px*/
            border-image-slice: 167;
            /*边框图片的平铺方式： 默认  stretch  拉伸效果*/
            border-image-repeat: stretch;
            /*边框图片宽度，如果没写，*/
            border-image-width: 10px;
        }

        li:nth-child(2){
            /*边框图片地址*/
            border-image-source: url(images/border.jpg);
            /*切分图片: 上 右 下 左， 自带单位px*/
            border-image-slice: 167 167 167 167;
            /*平铺完整*/
            border-image-repeat: round;
        }

        li:nth-child(3){
            /*边框图片地址*/
            border-image-source: url(images/border.jpg);
            /*切分图片: 上 右 下 左， 自带单位px*/
            border-image-slice: 167 167 167 167;
            /*平铺, 中间往两边铺，可能会不完整*/
            border-image-repeat: repeat;
        }


    </style>
</head>
<body>
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    
</body>
</html>
